<template>
  <view class="uni-goods-nav">
    <!-- 底部占位 -->
    <view class="uni-tab__seat" />
    <view class="uni-tab__cart-box flex">
      <view class="flex uni-tab__cart-sub-left">
        <view
          v-for="(item, index) in options"
          :key="index"
          class="flex uni-tab__cart-button-left uni-tab__shop-cart"
          @click="onClick(index, item)"
        >
          <view class="uni-tab__icon">
            <uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
            <!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
          </view>
          <text class="uni-tab__text">{{ item.text }}</text>
          <view class="flex uni-tab__dot-box">
            <text
              v-if="item.info"
              :class="{ 'uni-tab__dots': item.info > 9 }"
              class="uni-tab__dot"
              :style="{
                backgroundColor: item.infoBackgroundColor
                  ? item.infoBackgroundColor
                  : '#ff0000',
                color: item.infoColor ? item.infoColor : '#fff',
              }"
            >
              {{ item.info }}
            </text>
          </view>
        </view>
      </view>

      <view
        :class="{ 'uni-tab__right': fill }"
        class="flex uni-tab__cart-sub-right"
      >
        <view
          v-for="(item, index) in buttonGroup"
          :key="index"
          :style="{ background: item.backgroundColor, color: item.color }"
          class="flex uni-tab__cart-button-right"
          @click="buttonClick(index, item)"
        >
          <text
            :style="{ color: item.color }"
            class="uni-tab__cart-button-right-text"
          >
            {{ item.text }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { initVueI18n } from "@dcloudio/uni-i18n";
  import messages from "./i18n/index.js";
  const { t } = initVueI18n(messages);
  /**
   * GoodsNav 商品导航
   * @description 商品加入购物车、立即购买等
   * @tutorial https://ext.dcloud.net.cn/plugin?id=865
   * @property {Array} options 组件参数
   * @property {Array} buttonGroup 组件按钮组参数
   * @property {Boolean} fill = [true | false] 组件按钮组参数
   * @property {Boolean} stat 是否开启统计功能
   * @event {Function} click 左侧点击事件
   * @event {Function} buttonClick 右侧按钮组点击事件
   * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
   */
  export default {
    name: "UniGoodsNav",
    emits: ["click", "buttonClick"],
    props: {
      options: {
        type: Array,
        default() {
          return [
            {
              icon: "shop",
              text: t("uni-goods-nav.options.shop"),
            },
            {
              icon: "cart",
              text: t("uni-goods-nav.options.cart"),
            },
          ];
        },
      },
      buttonGroup: {
        type: Array,
        default() {
          return [
            {
              text: t("uni-goods-nav.buttonGroup.addToCart"),
              backgroundColor: "linear-gradient(90deg, #FFCD1E, #FF8A18)",
              color: "#fff",
            },
            {
              text: t("uni-goods-nav.buttonGroup.buyNow"),
              backgroundColor: "linear-gradient(90deg, #FE6035, #EF1224)",
              color: "#fff",
            },
          ];
        },
      },
      fill: {
        type: Boolean,
        default: false,
      },
      stat: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      onClick(index, item) {
        this.$emit("click", {
          index,
          content: item,
        });
      },
      buttonClick(index, item) {
        if (uni.report && this.stat) {
          uni.report(item.text, item.text);
        }
        this.$emit("buttonClick", {
          index,
          content: item,
        });
      },
    },
  };
</script>

<style lang="scss">
  .flex {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }

  .uni-goods-nav {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    flex-direction: row;
  }

  .uni-tab__cart-box {
    flex: 1;
    height: 50px;
    background-color: #fff;
    z-index: 900;
  }

  .uni-tab__cart-sub-left {
    padding: 0 5px;
  }

  .uni-tab__cart-sub-right {
    flex: 1;
  }

  .uni-tab__right {
    margin: 5px 0;
    margin-right: 10px;
    border-radius: 100px;
    overflow: hidden;
  }

  .uni-tab__cart-button-left {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    // flex: 1;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 10px;
    /* #ifdef H5 */
    cursor: pointer;
    /* #endif */
  }

  .uni-tab__icon {
    width: 18px;
    height: 18px;
  }

  .image {
    width: 18px;
    height: 18px;
  }

  .uni-tab__text {
    margin-top: 3px;
    font-size: 12px;
    color: #646566;
  }

  .uni-tab__cart-button-right {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    /* #endif */
    flex: 1;
    justify-content: center;
    align-items: center;
    /* #ifdef H5 */
    cursor: pointer;
    /* #endif */
  }

  .uni-tab__cart-button-right-text {
    font-size: 14px;
    color: #fff;
  }

  .uni-tab__cart-button-right:active {
    opacity: 0.7;
  }

  .uni-tab__dot-box {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    /* #endif */
    position: absolute;
    right: -2px;
    top: 2px;
    justify-content: center;
    align-items: center;
    // width: 0;
    // height: 0;
  }

  .uni-tab__dot {
    // width: 30rpx;
    // height: 30rpx;
    padding: 0 4px;
    line-height: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    background-color: #ff0000;
    border-radius: 15px;
  }

  .uni-tab__dots {
    padding: 0 4px;
    // width: auto;
    border-radius: 15px;
  }
</style>
